<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>果蔬商城</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <!-- 导航条开始 -->
  <nav class="navbar navbar-expand-lg bg-light fixed-top p-3 shadow">
    <div class="container">
      <!-- navbar -->
      <a href="#" class="navbar-brand">
        <img src="images/logo.png" width="70px" class="me-1">
      </a>
      <!-- 折叠按钮 -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- 导航菜单 -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active text-warning" href="#">首页</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle text-warning" href="#" id="navbarDropdown" role="button"
              data-bs-toggle="dropdown" aria-expanded="false">
              产品
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item text-warning" href="#">香蕉</a></li>
              <li><a class="dropdown-item text-warning" href="#">葡萄</a></li>
              <li><a class="dropdown-item text-warning" href="#">橘子</a></li>
              <li><a class="dropdown-item text-warning" href="#">覆盆子</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link  text-warning" href="#">关于我们</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link text-warning" href="#">联系我们</a>
          </li>
        </ul>
      </div>
      <!-- 图标 -->
      <div class="icon">
        <a href="login.html" class="text-decoration-none text-danger">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
            class="bi bi-person-square m-2" viewBox="0 0 16 16">
            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
            <path
              d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1v-1c0-1-1-4-6-4s-6 3-6 4v1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z" />
          </svg>
        </a>

        <a href="card.html" class="text-decoration-none text-danger">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-shop m-2"
            viewBox="0 0 16 16">
            <path
              d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.371 2.371 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976l2.61-3.045zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0M1.5 8.5A.5.5 0 0 1 2 9v6h1v-5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v5h6V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5M4 15h3v-5H4zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm3 0h-2v3h2z" />
          </svg>
        </a>

          <a href="" class="position-relative"  data-bs-toggle="offcanvas">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-cart3 text-danger"
            viewBox="0 0 16 16">
            <path
              d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
          </svg>
          <span
            class="badge rounded-pill text-bg-danger border position-absolute top-0 start-110 translate-middle">99+</span>
          </a>
          
      </div>
    </div>
  </nav>

  <!-- 导航条结束 -->
  <div class="py-5"></div>

  <!-- 轮播图 -->

  <div class="carousel slide carousel-fade" id="myCarousel" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active position-relative bg-cover" data-interval="8000"
        style="background-image: url(images/banner-01.jpg);">
        <div class="container position-absolute my-4">
          <h1 class="text-warning fw-bold">欢迎来到我们的果蔬商城</h1>
          <p class="text-warning">
            我们致力于提供最优质的果蔬
          </p>
          <a href="" class="btn btn-lg btn-warning">
            购买
          </a>
        </div>
      </div>
      <div class="carousel-item position-relative" data-interval="8000"
        style="background-image: url(images/banner-02.jpg)">
        <div class="container position-absolute my-4">
          <h1 class="text-warning fw-bold">新品上市</h1>
          <p class="text-warning">
            优质新鲜，实惠放心
          </p>
          <a href="" class="btn btn-lg btn-warning">
            购买
          </a>

        </div>
      </div>
      <div class="carousel-item position-relative bg-cover" data-interval="8000"
        style="background-image: url(images/banner-04.jpg)">
        <div class="container position-absolute my-4">
          <h1 class="text-warning fw-bold">当季鲜果</h1>
          <p class="text-warning">
            绿色天然 健康快乐

          </p>
          <a href="" class="btn btn-lg btn-warning">
            购买
          </a>
        </div>
      </div>
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </button>
  </div>


  <!-- 种类-->
  <div class="container-fluid fruite py-5">
    <div class="container py-5 ">
      <div class="tab-class text-center">
        <div class="row g-4">
          <div class="col-lg-4 text-start">
            <h1>我们的有机产品</h1>
          </div>
          <!-- 胶囊式按钮开始 -->
          <div class="col-lg-8 text-end">
            <ul class="nav nav-pills d-inline-flex text-center mb-5">
              <li class="nav-item1">
                <a class="d-flex m-2 py-2 bg-light rounded-pill active text-decoration-none" data-bs-toggle="pill"
                  href="#tab-1">
                  <span class="text-dark" style="width: 130px;">全部</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="d-flex py-2 m-2 bg-light rounded-pill text-decoration-none" data-bs-toggle="pill"
                  href="#tab-2">
                  <span class="text-dark" style="width: 130px;">推荐</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="d-flex m-2 py-2 bg-light rounded-pill text-decoration-none" data-bs-toggle="pill"
                  href="#tab-3">
                  <span class="text-dark" style="width: 130px;">健康</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="d-flex m-2 py-2 bg-light rounded-pill text-decoration-none" data-bs-toggle="pill"
                  href="#tab-4">
                  <span class="text-dark" style="width: 130px;">热门</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="d-flex m-2 py-2 bg-light rounded-pill text-decoration-none" data-bs-toggle="pill"
                  href="#tab-5">
                  <span class="text-dark" style="width: 130px;">其他</span>
                </a>
              </li>
            </ul>
          </div>
          <!-- 胶囊式按钮结束 -->
        </div>
        <div class="tab-content">
          <!-- 图片开始 -->
          <!-- 第一组开始 -->
          <div id="tab-1" class="tab-pane fade show p-0 active">
            <div class="row g-4">
              <div class="col-lg-12">
                <div class="row g-4">
                  <!-- 第一组第一张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-3.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>香蕉</h4>
                        <p>
                          香蕉中糖分含量高，食用之后可以迅速为机体补充能量，香蕉中含有的镁元素也有消除疲劳的效果，富含维生素C、钾等营养物质
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第一组第二张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-2.jpg" class="img-fluid w-100" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>覆盆子</h4>
                        <p>
                          覆盆子含有大量的维生素A和类黄酮，覆盆子含有大量的维生素A和类黄酮，可以直接食用。减轻炎症反应和相关疾病
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第一组第三张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>橙子</h4>
                        <p>
                          橙子中的维生素C和其他抗氧化剂有助于抵抗自由基的损害。提高身体对疾病的抵抗力，助于抵抗自由基的损害，减缓衰老过程
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第一组第四张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-4.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>杏</h4>
                        <p>
                          杏中富含的维生素E和钾等营养物质有助于促进血液循环，降低血压，预防心血管疾病的发生，助于促进血液循环
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第一组第五张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>葡萄</h4>
                        <p>
                          葡萄中的多酚类化合物被认为对心血管系统有益。它们有助于降低血压、改善血液循环，减少心脏病和中风的风险。
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第一组第六张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>苹果</h4>
                        <p>
                          苹果中的一些化合物具有抗炎特性，可以减轻炎症反应和相关疾病的症状。苹果中的膳食纤维有助于稳定血糖水平

                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第一组第七张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-7.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>蓝莓</h4>
                        <p>P蓝莓富含维生素C和其他营养物质，有助于增强免疫系统的功能，提高身体对疾病的抵抗力，助控制食欲和血糖水平
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第一组第八张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-8.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>草莓</h4>
                        <p>草莓中的多酚类化合物被认为对心血管系统有益。它们有助于降低血压、改善血液循环，减少心脏病和中风的风险。</p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 第一组结束 -->


          <!-- 第二组开始 -->
          <div id="tab-2" class="tab-pane fade show p-0">
            <div class="row g-4">
              <div class="col-lg-12">
                <div class="row g-4">
                  <!-- 第二组第一张-->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>葡萄</h4>
                        <p>
                          葡萄中的多酚类化合物被认为对心血管系统有益。它们有助于降低血压、改善血液循环，减少心脏病和中风的风险。
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第二组第二张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>覆盆子</h4>
                        <p>
                          覆盆子含有大量的维生素A和类黄酮，覆盆子含有大量的维生素A和类黄酮，可以直接食用。减轻炎症反应和相关疾病
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 第二组结束 -->

          <!-- 第三组开始 -->
          <div id="tab-3" class="tab-pane fade show p-0">
            <div class="row g-4">
              <div class="col-lg-12">
                <div class="row g-4">
                  <!-- 第三组第一张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>橙子</h4>
                        <p>
                          橙子中的维生素C和其他抗氧化剂有助于抵抗自由基的损害。提高身体对疾病的抵抗力，助于抵抗自由基的损害，减缓衰老过程
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第三组第二张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>苹果</h4>
                        <p>
                          苹果中的一些化合物具有抗炎特性，可以减轻炎症反应和相关疾病的症状。苹果中的膳食纤维有助于稳定血糖水平

                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 第三组结束 -->

          <!-- 第四组开始 -->
          <div id="tab-4" class="tab-pane fade show p-0">
            <div class="row g-4">
              <div class="col-lg-12">
                <div class="row g-4">
                  <!-- 第四组第一张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>葡萄</h4>
                        <p>
                          葡萄中的多酚类化合物被认为对心血管系统有益。它们有助于降低血压、改善血液循环，减少心脏病和中风的风险。
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第四组第二张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-4.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>杏</h4>
                        <p>
                          杏中富含的维生素E和钾等营养物质有助于促进血液循环，降低血压，预防心血管疾病的发生，助于促进血液循环
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 第四组结束 -->

          <!-- 第五组开始 -->
          <div id="tab-5" class="tab-pane fade show p-0">
            <div class="row g-4">
              <div class="col-lg-12">
                <div class="row g-4">
                  <!-- 第五组第一张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-3.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>香蕉</h4>
                        <p>
                          香蕉中糖分含量高，食用之后可以迅速为机体补充能量，香蕉中含有的镁元素也有消除疲劳的效果
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第五组第二张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>覆盆子</h4>
                        <p>
                          覆盆子含有大量的维生素A和类黄酮，覆盆子含有大量的维生素A和类黄酮，可以直接食用。
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 第五组第三张 -->
                  <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="rounded position-relative fruite-item">
                      <div class="fruite-img">
                        <img src="images/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
                      </div>
                      <div class="text-white bg-warning px-3 py-1 rounded position-absolute"
                        style="top: 10px; left: 10px;">Fruits</div>
                      <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                        <h4>橙子</h4>
                        <p>
                          橙子中的维生素C和其他抗氧化剂有助于抵抗自由基的损害，减缓衰老过程。提高身体对疾病的抵抗力
                        </p>
                        <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">¥4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
                            添加到购物车</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 第五组结束 -->
        </div>
      </div>
    </div>
  </div>


  <!-- 进度条 -->
  <section class="home-services py-5" id="services">
    <div class="container py-lg-5 py-md-4 py-2">
      <h3 class="title-style text-center mb-lg-5 mb-4">
        蔬菜中的维生素含量</h3>
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-6">
          <div class="box-wrap position-relative">
            <h4 class="number position-absolute fs-1">01</h4>
            <h4><a href="#card" class="fs-25 fw-bold mt-5 my-4 text-dark text-decoration-none">辣椒</a></h4>
            <p>
              <img src="images/product-3.jpg" alt="">
            </p>
            <div class="progress m-5">
              <div class="progress-bar bg-success progress-bar-striped" style="width: 0%;" role="progressbar1">80%
              </div>
            </div>
            <button id="btnControl1" class="btn btn-warning" onclick="startProgress1()">查看维生素含量</button>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
          <div class="box-wrap position-relative">
            <h4 class="number position-absolute fs-1">02</h4>
            <h4><a href="#card" class="fs-25 fw-bold mt-5 my-4 text-dark text-decoration-none">西红柿</a></h4>
            <p>
              <img src="images/product-1.jpg" alt="">
            </p>
            <div class="progress m-5">
              <div class="progress-bar bg-success progress-bar-striped" style="width: 0%;" role="progressbar2">80%
              </div>
            </div>
            <button id="btnControl2" class="btn btn-warning" onclick="startProgress2()">查看维生素含量</button>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 mt-lg-0 mt-4">
          <div class="box-wrap position-relative">
            <h4 class="number position-absolute fs-1">03</h4>
            <h4><a href="#card" class="fs-25 fw-bold mt-5 my-4 text-dark text-decoration-none">黄瓜</a></h4>
            <p>
              <img src="images/product-5.jpg" alt="">
            </p>
            <div class="progress m-5 ">
              <div class="progress-bar bg-success progress-bar-striped" style="width: 0%;" role="progressbar3">80%
              </div>
            </div>
            <button id="btnControl3" class="btn btn-warning" onclick="startProgress3()">查看维生素含量</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 返回顶部按钮 -->
  <a href="#" class="btn btn-warning border-3 border-secondary  position-fixed rounded-circle back-to-top">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-airplane-fill"
      viewBox="0 0 16 16">
      <path
        d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849" />
    </svg>
  </a>



  <!-- footer -->
  <div class="footer p-4">
    <div class="container">
      <div class="row">
        <div class="col-md-4 grid">
          <h3 class="text-white">关于我们</h3>
          <p class="fs-50">新鲜和健康的食物选择对于拥有一个健康的身体是至关重要的。新鲜的水果和蔬菜是必不可少的。
            我们的水果和蔬菜是从该地区最新鲜的农场采摘的，为您提供最营养和美味的选择</p>
        </div>
        <div class="col-md-4 grid">
          <h3 class="text-white">导航</h3>
          <ul>
            <li class="text"><a href="about.html">首页</a></li>
            <li class="text"><a href="typography.html">产品</a></li>
            <li class="text"><a href="icons.html">关于我们</a></li>
            <li class="text"><a href="gallery.html">联系我们</a></li>

          </ul>
        </div>
        <div class="col-md-4 grid">
          <h3 class="text-white">联系我们</h3>
          <form action="#" method="post">
            <input type="email" id="mc4wp_email" class="bg-white shadow mb-4 w-100 p-2 fs-25" name="EMAIL"
              placeholder="Enter your email here" required="">
            <input type="submit" class="text-dark fs-25 border-1 text-decoration-none p-2" value="Subscribe">
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- footer -->
  <!-- copyright -->
  <div class="copyright bg-dark p-2 text-center">
    <div class="container">
      <p class="fs-25 m-0">© hfjsjflsjlfjksdjf . fdsfdsfsdfs| fsdfsdf <a href="#" class="text-decoration-none">
          fsdfsd</a> </p>
    </div>
  </div>
  <!-- copyright -->






  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/index.js"></script>

</body>

</html>